<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="maximum-dpr=2" name="flexible" />
    <title>确认购买</title>
</head>
<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
<!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> -->
<script>
    (function(doc, win) {
        var docEl = doc.documentElement,
            isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
            dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
            dpr = 1,
            scale = 1 / dpr,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function() {
            var width = docEl.clientWidth;
            if (width / dpr > 750) {
                width = 750 * dpr;
            }
            // 乘以100，px : rem = 100 : 1
            docEl.style.fontSize = 100 * (width / 750) + 'px';
        };
        recalc()
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
</script>
  <style>
      body{
          margin: 0;
          background: #F8F8F8;
      }
      p{
          margin: 0;
          font-size: 0.16rem;
      }
      .header{
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          background: #ffffff;
          position: fixed;
          top: 0;
          left: 0;
          text-align: center;
          font-size: 0.34rem;
          color: #333333;
          font-weight: bold;
          z-index: 9999;
      }
      .container{
          margin-top: 0.8rem;
          position: relative;
      }
      .dizhi{
        width: 6.9rem;
        min-height: 1.68rem;
        padding: 0.4rem;
        margin: 1.26rem auto 0;
        background: #ffffff;
        border-radius: 0.2rem;
        box-sizing: border-box;
        display: flex;
      }
      .shop,.pay{
        width: 6.9rem;
        min-height: 1.68rem;
        padding: 0.4rem;
        margin: 0.3rem auto;
        background: #ffffff;
        border-radius: 0.2rem;
        box-sizing: border-box;
      }
      .buy{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 1.6rem;
        line-height: 0.8rem;
        background: #FFFFFF;
        display: flex;
        padding: 0.4rem;
        box-sizing: border-box;
      }
      .sure{
          font-size: 0.3rem;
          color: #333333;
          text-align: center;
          line-height: 0.88rem;
          height: 0.88rem;
          width: 2.6rem;
          background: #FEC70C;
          border-radius: 0.1rem;
      }
  </style>
<body>
    <div class="header">
        <img src="./img/next.png" class="back" style="vertical-align: top;width: 0.18rem;height: 0.36rem;position: absolute;top: 0.18rem;left: 0.3rem;transform: rotate(180deg);" alt="">
        确认购买
    </div>
    <div class="container">
        <div class="dizhi">
            <div style="height: 0.88rem;">
                <img src="./img/dingwei.png" style="vertical-align: top;width: 0.6rem;height: 0.6rem;margin-top: 0.14rem;" alt="">
            </div>
            <div style="flex:1;margin-left:0.3rem;height: 0.88rem;">
                <!-- <p style="font-size: 0.28rem;font-weight: 500;"><span>蔡超</span><span>15489775412</span></p>
                <p style="font-size: 0.24rem;margin-top: 0.14rem;">浙江省杭州市下城区光阳国际5404</p> -->
                <p style="font-size: 0.3rem;color:#666666;vertical-align: top;margin-top: 0.24rem;">请填写收货地址</p>
            </div>
            <div style="height: 0.88rem;">
                <img src="./img/next.png" style="vertical-align: top;width: 0.14rem;height: 0.28rem;margin-top: 0.3rem;" alt="">
            </div>
        </div>  
        <div class="shop">
            <div style="display: flex;width: 100%;">
                <img src="./img/shop.png" style="width: 1.6rem;height:1.2rem;" alt="">
                <div style="flex: 1;margin-left: 0.3rem;">
                    <p style="font-size: 0.28rem;margin-bottom: 0.18rem;">景德镇骨瓷餐具套装</p>
                    <p style="color: #FFA54E;"><span>￥</span><span class="price">1688.00</span></p>
                </div>
                <div style="height: 0.88rem;">
                    <img src="./img/next.png" style="vertical-align: top;width: 0.14rem;height: 0.28rem;margin-top: 0.3rem;" alt="">
                </div>
            </div>
            <div style="display: flex;margin-top: 0.3rem;">
                <span style="font-size: 0.28rem;flex: 1;">选择数量</span>
                <div style="display: flex;">
                    <div class="jian" style="font-size: 0.28rem;background: #F9F9F9;width: 0.3rem;text-align:center">-</div>
                    <div class="num" style="font-size: 0.28rem;background: #F9F9F9;width: 0.3rem;margin:0 0.1rem;text-align:center">1</div>
                    <div class="jia" style="font-size: 0.28rem;background: #F9F9F9;width: 0.3rem;text-align:center">+</div>
                </div>
            </div>
        </div>  
        <div class="pay">
            <p style="color: #999999;font-size: 0.28rem;">支付方式</p>
            <div style="display: flex;margin-top: 0.5rem;">
                <img src="./img/qiaobao.png" style="width:0.36rem;height:0.36rem" alt="">
                <p style="font-size:0.28rem;flex:1;margin-left: 0.3rem;">钱包</p>
                <img src="./img/checkbox_h.png" class="checkbox" style="width:0.36rem;height:0.36rem" alt="">
            </div>
            <div style="display: flex;margin-top: 0.5rem;">
                <img src="./img/alipay.png" style="width:0.36rem;height:0.36rem" alt="">
                <p style="font-size:0.28rem;flex:1;margin-left: 0.3rem;">支付宝</p>
                <img src="./img/checkbox_a.png" class="checkbox" style="width:0.36rem;height:0.36rem" alt="">
            </div>
            <div style="display: flex;margin-top: 0.5rem;">
                <img src="./img/wechet.png" style="width:0.36rem;height:0.36rem" alt="">
                <p style="font-size:0.28rem;flex:1;margin-left: 0.3rem;">微信</p>
                <img src="./img/checkbox_h.png" class="checkbox" style="width:0.36rem;height:0.36rem" alt="">
            </div>
        </div>
        <div class="buy">
            <div style="font-size: 0.3rem;flex:1">
                <span>支付宝支付：</span>
                <span>￥</span>
                <span class="total">1688.00</span>
            </div>
            <div class="sure">
                确认支付
            </div>
        </div>
    </div>
</body>
<script>
    $('.checkbox').click(function(e){
        console.log($($(this).parent().parent().children().children()))
        console.log($($(this).parent().parent().children().children().find('checkbox')))
        $($($(this).parent().parent().children().children()[2])).attr('src','./img/checkbox_h.png')
        $($($(this).parent().parent().children().children()[5])).attr('src','./img/checkbox_h.png')
        $($($(this).parent().parent().children().children()[8])).attr('src','./img/checkbox_h.png')
        if($(this).src=='./img/checkbox_h.png'){
            $(this).attr('src','./img/checkbox_a.png')
        }
        else{
            $(this).attr('src','./img/checkbox_a.png')
        }
        // console.log($(this).parent().parent().children())
        // $($(this).parent().children()[3]).attr('src','./img/checkbox_a.png')
        // console.log(e)
    })
    $('.back').click(function(e){
        window.history.back()
    })
    $('.jian').click(function(){
        if(Number($('.num').text()>1))
        $('.num').text(Number($('.num').text())-1)
        $('.total').text((Number($('.num').text())*Number($('.price').text())).toFixed(2))
    })
    $('.jia').click(function(){
        $('.num').text(Number($('.num').text())+1)
        $('.total').text((Number($('.num').text())*Number($('.price').text())).toFixed(2))
    })
</script>
</html>